<template>
  <div class="report-container">
    <div class="report-select-year">
      <a-year-picker v-model="yearDate" style="width: 328px;" />
    </div>
    <div class="report-show">
      <img src="@/assets/images/report-icon.png" alt="" class="report-show-icon" >
      <p class="report-show-title">2024年数据资产披露报告</p>
      <a-button type="primary" @click="goDetails">查看详情</a-button>
    </div>
    <div class="report-footer-content">
      <p class="report-footer-title">披露事项</p>
      <div class="report-footer-checkbox">
        <a-checkbox-group :model-value="checkedValue" @change="select">
        <a-checkbox value="1">资产披露</a-checkbox>
        <a-checkbox value="2">关联视图</a-checkbox>
        <a-checkbox value="3">关联项目</a-checkbox>
        <a-checkbox value="4">资产成本</a-checkbox>
        <a-checkbox value="5">摊销信息</a-checkbox>
        <a-checkbox value="6">减值信息</a-checkbox>
      </a-checkbox-group>
      </div>
    </div>
  </div>
  
</template>

<script setup lang=ts>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
const yearDate = ref("")
const checkedValue = ref<(string|number|boolean)[]>([])

const select = (val)=>{
  console.log(val)
}

const goDetails = ()=>{
  router.push({
    name:"statementsDetail"
  })
}
</script>
<style lang="less" scoped>
.report-container{
  margin-top: 4px;
  padding: 20px 20px;
  border: 1px solid #EBF0FA;
  border-radius: 8px;
  
}

.report-select-year{
  display: flex;
  justify-content: flex-end;
}
.report-show-icon{
  width: 175px;
  height: 180px;
}
.report-show-title{
  font-size: 16px;
  font-weight: 700;
  color: #394D73;
  margin-top: 16px;
  margin-bottom:12px;
}

.report-show{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.report-footer-content{
  margin-top: 24px;
  padding:16px 20px ;
  border: 1px solid #EBF0FA;
}
.report-footer-title{
  font-size: 16px;
  font-weight: 700;
  color: #394D73;
}
.report-footer-checkbox{
  margin-top: 22px;
}
::v-deep{
  .arco-picker{
    background-color: #fff;
    border: 1px solid #D3DBEB;
    border-radius: 4px
  }
  .arco-checkbox-label{
    color: #465A80;
  }
}
</style>